<template>
    <div class="app-datetime-picker">
        <mt-datetime-picker ref="picker" v-model="timeValue" type="datetime" @confirm="confirmTime">
        </mt-datetime-picker>
        <van-cell-group>
            <van-field v-model="curValue" :disabled="disabled" :readonly="true" :placeholder="placeholder" @focus="openTime()" />
        </van-cell-group>
    </div>
</template>



<script lang="ts">
import { Vue, Component, Prop, Provide, Emit, Watch } from 'vue-property-decorator';
import * as moment from 'moment';


@Component({
    components: {
      
    }
})
export default class AppDateTimePicker extends Vue {

        /**
         * 传入值
         *
         * @type {string}
         * @memberof AppDateTimePicker
         */
        @Prop() public value?:string;

        /**
         * 确定的时间
         *
         * @type {any}
         * @memberof AppDateTimePicker
         */
        get curValue(){
            return this.value;
        }

        set curValue(value:any){
            this.$emit('valuechange',value);
        }

        get timeValue(){
            if(this.value){
                return moment(this.value).format('YYYY-MM-DD HH:mm:ss');
            }
        }

        set timeValue(val:any){

        }


        /**
         * 是否禁用
         *
         * @type {boolean}
         * @memberof AppDateTimePicker
         */
        @Prop() public disabled?:boolean;

        /**
         * placeholder
         *
         * @type {boolean}
         * @memberof AppDateTimePicker
         */
        @Prop() public placeholder?:string;

        /**
         * 时间点击事件
         *
         * @memberof AppDateTimePicker
         */
        public openTime(){
            let datetimepicker:any = this.$refs.picker;
            datetimepicker.open();
        }

         /**
         * 确定时间点击事件
         *
         * @memberof AppDateTimePicker
         */
        public confirmTime($event:any){
            this.curValue = moment($event).format('YYYY-MM-DD HH:mm:ss');
        }


        
    
}
</script>
<style lang="less">
  

</style>